<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="keywords" content="{$seo_keywords}">
<meta name="description" content="{$seo_description}">
<title>中奖记录</title>
<link rel="icon" href="{$system.ico}">
<link rel="stylesheet" type="text/css" href="/themes/shop/wap/static/css/theme.min.css">
<link rel="stylesheet" type="text/css" href="/themes/shop/wap/static/css/element.min.css">
<link rel="stylesheet" type="text/css" href="/themes/shop/wap/static/css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="/themes/shop/wap/static/css/onekey.min.css">
<link rel="stylesheet" type="text/css" href="/themes/shop/wap/static/css/page.min.css">
<link rel="stylesheet" type="text/css" href="/themes/shop/wap/static/css/font.min.css">
<script type="text/javascript" src="/themes/shop/wap/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/themes/shop/wap/static/js/vue.min.js"></script>
<script type="text/javascript" src="/themes/shop/wap/static/js/element.min.js"></script>
<script type="text/javascript" src="/themes/shop/wap/static/js/swiper.min.js"></script>
<script type="text/javascript" src="/themes/shop/wap/static/js/qrcode.min.js"></script>
<script type="text/javascript" src="/themes/shop/wap/static/js/html2canvas.min.js"></script>
<script type="text/javascript" src="/themes/shop/wap/static/js/common.js"></script>
</head>
<body>
<div id="app" class="scroll-view-page" v-cloak>
    <div class="record">
    	<div v-for="(item, index) in list" class="record-list">
    		<img class="goods-img" :src="item.lottery_cover">
    		<div class="right-data">
    			<div class="title line1">{{item.lottery_title}}</div>
    			<div class="goods-msg">奖品类型：
        			<span class="num">
        			    <span v-if="item.lottery_type == 1">优惠券</span>
        			    <span v-if="item.lottery_type == 2">积分</span>
        			    <span v-if="item.lottery_type == 3">商品</span>
        			    <span v-if="item.lottery_type == 4">红包</span>
        			</span>
    			</div>
    			<div v-if="item.status == 0" class="goods-msg exchange" @click="exchange(item)">立即兑换</div>
    			<div v-else class="goods-msg">兑换时间：{{item.exchange_time}}</div>
    		</div>
    	</div>
    </div>
    <el-dialog
        title="填写基础信息"
        :visible.sync="dialog"
        width="350px">
        <el-form
            ref="address"
            class="form" 
            label-width="100px" 
            label-position="left" 
            :model="address" 
            :rules="addressRules" 
            :show-message="false"
            hide-required-asterisk 
            status-icon>
            <el-form-item label="姓名" prop="consigner">
                <el-input v-model="address.consigner" placeholder="请输入您的姓名"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="mobile">
                <el-input v-model="address.mobile" placeholder="请输入联系电话"></el-input>
            </el-form-item>
            <el-form-item label="详情地址" prop="address">
                <el-input v-model="address.address" type="textarea" placeholder="请输入具体地址" style="margin-top: 10px;"></el-input>
            </el-form-item>
            <div class="keepBnt" @click="sublimit()" style="margin-top: 20px">提交</div>
        </el-form>
    </el-dialog>
    <el-empty v-if="list.length == 0 && loading == false" description="亲，暂无中奖记录哟~"></el-empty>
    <div class="loading" v-if="nomore == false && loading == false && total > pageSize">下拉加载更多</div>
    <div class="loading" v-if="loading"><i class="el-icon-loading"></i>正在加载中...</div>
    <div class="no-more" v-if="nomore && page != 1">已没有更多数据</div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                dialog: false,
                loading: false,
                nomore: false,
                list: [],
                total: 0,
                page: 1,
                pageSize: 10,
                address: {
                    id: '',
                    consigner: '',
                    mobile: '',
                    pcd: [],
                    address: '',
                },
                addressRules: {
                    consigner: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                    ],
                    mobile: [
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                    ],
                    pcd: [
                        { required: true, message: '请选择省市区', trigger: 'blur' },
                    ],
                    address: [
                        { required: true, message: '请输入详情地址', trigger: 'blur' },
                    ],
                },
                id: 0,
            }
        },
        created() {
            this.cityGet();
            this.listGet();
        },
        mounted() {
            let self = this;
            self.$nextTick(() => {
                document.getElementById('app').onscroll = () => {
                    if (self.loading == false) {
                        var scrollTop    = document.getElementById('app').scrollTop|window.scrollY;
                        var windowHeight = document.getElementById('app').clientHeight;
                        var scrollHeight = document.getElementById('app').scrollHeight;
                        if (scrollTop + windowHeight >= scrollHeight) {
                            self.pageChange();
                        }
                    }
                }
            });
        },
        methods: {
            // 分页改变时
            pageChange() {
                if (this.total / this.pageSize > this.page) {
                    this.page++;
                    this.listGet();
                } else {
                    this.nomore = true;
                }
            },
            // 列表
            listGet() {
                let self = this;
                let data = {page: self.page};
                self.loading  = true;
                post('api/lottery/lottery/my', data, function (res) {
                    self.loading = false;
                    if (res.status === 'success') {
                        self.list  = self.list.concat(res.data);
                        self.total = res.count;
                        let total = (Array(4).join("0") + self.total).slice(-4);
                        self.totalArray = total.toString().split("");
                    } else {
                        self.$notify({showClose: true, message: res.message, type: res.status});
                    }
                })
            },
            // 提交兑换
            sublimit() {
                let self = this;
                self.$refs.address.validate((valid) => {
                    if (valid) {
                        post('api/lottery/lottery/exchange', self.address, function(res){
                            self.$notify({ showClose: true, message: res.message, type: res.status});
                            if (res.status == 'success') {
                                self.list = [];
                                self.page = false;
                                self.listGet();
                                self.dialog = false;
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            // 兑换
            exchange(item) {
                this.address.id = item.id;
                this.dialog = true;
            },
        }
    })
</script>
</body>
</html>